<template>
  <div class="app-container">

    <h1 style="text-align: center;color: orange;">发布新课程</h1>

    <el-steps :active="1" finish-status="success" simple style="margin: 20px 0">
      <el-step title="编辑课程基本信息"></el-step>
      <el-step title="编辑课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>

    <el-form label-width="120px">

      <el-form-item label="课程标题">
        <el-input v-model="course.title" placeholder="课程标题"></el-input>
      </el-form-item>

      <el-form-item label="课程讲师">
        <el-select v-model="course.teacherId" clearable placeholder="课程讲师">
          <el-option
            v-for="item in teachers"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属分类">
        <el-select v-model="parentSubject" @clear="clearSubject" @change="clearSubject" clearable placeholder="一级课程">
            <el-option
              v-for="item in subjects"
              v-if="item.parentId==0"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>

          <el-select v-model="course.subjectId" @visible-change="tip" clearable collapse-tags style="margin-left: 20px;" placeholder="二级课程">
            <el-option
              v-for="item in subjects"
              v-if="item.parentId==parentSubject"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>

      </el-form-item>

      <el-form-item label="总课时/小时">
        <el-input-number v-model="course.lessonNum" :min="0" placeholder="总课时/小时" controls-position="right"></el-input-number>
      </el-form-item>

      <el-form-item label="总价格/元">
        <el-input-number v-model="course.price" :min="0" placeholder="总价格/元" controls-position="right"></el-input-number>
      </el-form-item>

      <!-- 课程封面 -->
      <el-form-item label="课程封面">

        <!-- 课程封面缩略图 -->
        <pan-thumb :image="course.cover"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">课程封面</el-button>

        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="BASE_API+'/oss/updateFile'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
      </el-form-item>

      <el-form-item label="课程简介">
        <!-- <el-input v-model="course.description" placeholder="课程简介" :rows="6" type="textarea"></el-input> -->
        <tinymce :height="100" v-model="course.description" placeholder="课程简介"></tinymce>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="next" :disabled="btnStatus">保存并下一步</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

  import courseApi from '@/api/course'

  import teacher from '@/api/teacher'

  import subject from '@/api/subject'

  // 导入js-cookie
  import cookie from 'js-cookie'

  // 文本编辑器
  import tinymce from '@/components/Tinymce'

  // 上传图片所需js依赖
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  export default {
    // 声明组件
    components: { ImageCropper, PanThumb, tinymce },
    data() {
      return {
        "btnStatus": false,
        "course": {
          "courseId": "",
          "title": "",
          "subjectId": "",
          "teacherId": "",
          "lessonNum": 0,
          "price": 0,
          "cover": "",
          "description": "",
        },
        //上传弹框组件是否显示
        imagecropperShow: false,
        imagecropperKey: 0, //上传组件key值
        BASE_API: process.env.BASE_API, //获取dev.env.js里面地址
        teachers: [], // 讲师信息列表
        subjects: [], // 课程分类信息列表
        parentSubject: null // 课程分类中被选中的一级菜单
      }
    },
    created() {
      // 直接点击链接过来的，清空cookie
      if(this.$route.params && this.$route.params.id && this.$route.params.id==':id' && cookie.get("course")) {
        // 删除之前没有完成的信息
        let c=JSON.parse(unescape(cookie.get("course")));
        if(c.courseId) {
          courseApi.deleteCourse(c.courseId);
        }
        cookie.remove("course");
        // 初始化所有data
        this.course={
          "courseId": "",
          "title": "",
          "subjectId": "",
          "teacherId": "",
          "lessonNum": 0,
          "price": 0,
          "cover": "",
          "description": ""
        };
        this.imagecropperShow=false;
        this.imagecropperKey=0;
        this.teachers=[];
        this.subjects=[];
        this.parentSubject=null;
      }
      // 执行初始化
      this.init();
    },
    methods: {
      // 封装页面加载方法
      init() {
        let c=null;
        // 如果cookie中存在course，则反显数据
        if(cookie.get("course")) {
          // 取出数据
          c=JSON.parse(unescape(cookie.get("course")));
          this.course=c;
        }
        // 渲染讲师下拉框
        this.getAllTeachers();
        // 渲染课程分类信息下拉框
        this.getSubjectsForSelect(c);
      },

      // 跳转到"编辑课程大纲"页面
      next() {
        // 校验参数
        if(!this.course.title) {
          this.$message.error("标题不能为空");
          return ;
        }
        if(!this.course.teacherId) {
          this.$message.error("课程讲师为必选项");
          return ;
        }
        if(!this.course.subjectId) {
          this.$message.error("所属分类为必选项");
          return ;
        }
        if(!this.course.lessonNum || this.course.lessonNum < 0) {
          this.$message.error("总课时非法");
          return ;
        }
        if(!this.course.price || this.course.price < 0) {
          this.$message.error("总价格非法");
          return ;
        }
        if(!this.course.cover) {
          this.$message.error("课程封面不能为空");
          return ;
        }
        if(!this.course.description) {
          this.$message.error("课程简介不能为空");
          return ;
        }
        // 如果course中存在课程id，则表示需要进行修改操作，否则则进行新增操作
        if(this.course.courseId) {
          // 执行修改操作
          courseApi.updateCourse(this.course)
            .then(res => {
              // 将数据暂存到cookie中，以便后面使用
              this.course.courseId=res.data.courseId;
              cookie.set("course", escape(JSON.stringify(this.course)));
              // 提示成功
              this.$message({
                type: 'success',
                message: res.message,
              });
              // 前往下一个页面
              this.$router.push({"path": "/course/chapter/"+res.data.courseId});
            }).catch(res => {
              // 若cookie中存在课程信息，则清空
              if(cookie.get("course")) {
                cookie.remove("course");
              }
              this.$message.error(res.message);
            });
            return ;
        }
        // 执行添加课程操作
        courseApi.addCourse(this.course)
          .then(res => {
            // 将数据暂存到cookie中，以便后面使用
            this.course.courseId=res.data.courseId;
            cookie.set("course", escape(JSON.stringify(this.course)));
            // 提示成功
            this.$message({
              type: 'success',
              message: res.message,
            });
            // 前往下一个页面
            this.$router.push({"path": "/course/chapter/"+res.data.courseId});
          }).catch(res => {
            // 若cookie中存在课程信息，则清空
            if(!cookie.get("course")) {
              cookie.remove("course");
            }
            this.$message.error(res.message);
          });
      },

      // 获取讲师数据
      getAllTeachers() {
        teacher.selectTeacherForSelect()
          // 访问成功
          .then(res => {
              // 结果集
              this.teachers=res.data.teachers;
          })
          // 访问失败
          .catch(err => {
            this.$message.error(err.message);
          });
      },
      // 获取课程分类信息
      getSubjectsForSelect(c) {
        subject.selectSubjectsForSelect()
          .then(res => {
            this.subjects=res.data.subjects;
            // 为课程分类的一级菜单赋默认值
            if(c) {
              for(let i=0;i<this.subjects.length;i++) {
                if(c.subjectId==this.subjects[i].id) {
                  this.parentSubject=this.subjects[i].parentId;
                  break;
                }
              }
            }
          }).catch(err => {
            this.$message.error(err.message);
          });
      },
      // 二级课程分类点击事件
      tip(flag) {
        if(flag){
          // 判断一级课程分类是否被选中数据
          if(!this.parentSubject) {
            this.$message({
              type: 'info',
              message: "需要先选择一级课程",
            });
          }
        }
      },
      // 清除一级课程分类时，同时清除二级课程分类
      clearSubject() {
        this.course.subjectId="";
      },

      // 关闭上传弹窗方法
      close() {
        this.imagecropperShow=false;
      },
      // 上传文件成功方法
      cropSuccess(res) {
        // 关闭上传头像弹窗
        this.imagecropperShow=false;
        // 防止图片不更新，每次修改成功修改imagecropperKey的值
        this.imagecropperKey++;
        // 获取图片url
        this.course.cover=res.url;
      }
    }
  }

</script>

<style scoped>

  .tinymce-container {
    line-height: 29px;
  }

</style>
